<template>
  <div class="markform">
    <div
      style="display: flex; justify-content: space-between; margin-bottom: 20px"
    >
      <div class="tabs_items active_current">查看随访信息表单</div>
      <div>
        <!-- <el-button type="primary" @click="saveJsonData">修改</el-button> -->
        <el-button type="primary" @click="goBack">返回</el-button>
      </div>
    </div>
    <el-card class="box-card">
      <fm-generate-form
        :data="formContent"
        :value="formContentResult"
        ref="generateForm"
        style="height: 100%"
        preview
        clearable
      >
      </fm-generate-form>
    </el-card>
  </div>
</template>
<script>
import { getFormContent } from "@/api/follow-up/follow-up-information";

export default {
  name: "follow-up-information-details",
  data() {
    return {
      formContent: [],
      formContentResult:[],
      planPatFormId: "",
      patId: "",
      planId: "",
      memPatTypeCodes: "",
    };
  },
  mounted() {
    this.planPatFormId = this.$route.query.planPatFormId;
    /* 不影响其他页面使用  （参数） */
    this.patId = this.$route.query.patId;
    this.planId = this.$route.query.planId;
    this.memPatTypeCodes = this.$route.query.memPatTypeCodes;
    /* ============================ */
    getFormContent({
      planPatFormId: this.planPatFormId,
    }).then((res) => {
      console.log(res);
      this.formContent = JSON.parse(res.data.formContent);
      this.formContentResult = JSON.parse(res.data.formContentValue);
    });
  },
  methods: {
    goBack() {
      this.$router.push({
        path: "follow-up-details",
        query: {
          activeName: "third1", //查询表单名
          patId: this.patId,
          memPatTypeCodes: this.memPatTypeCodes,
          planId: this.planId,
        },
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.tabs_items {
  font-size: 18px;
  font-weight: bold;
  color: #a1a8b3;
  margin-right: 40px;
  cursor: pointer;
  &.active_current {
    color: #32353b;
  }
}
.markform {
  padding: 20px;
  height: 100vh;
  position: relative;
}
.markform /deep/ .components-list .form-edit-widget-label > a {
  color: #333;
}
.markform /deep/ .components-list .form-edit-widget-label > a .icon {
  display: inline;
}
.markform /deep/ .el-aside {
  width: 300px !important;
}
.markform /deep/ .el-header {
  display: flex;
  justify-content: flex-end;
}
.markform /deep/ .widget-config-container {
  width: 350px !important;
}
/* .markform /deep/ .el-form--label-top .el-form-item--medium:first-child {
  display: none;
} */
.markform /deep/ .identification {
  display: none !important;
}
.markform /deep/ .titleColor {
  display: none !important;
}
.markform /deep/ .customClass {
  display: none !important;
}
.markform /deep/ .others {
  display: none !important;
}
.markform /deep/ .additionalEdu {
  display: none !important;
}
.markform /deep/ .addOthers {
  display: none !important;
}
.back {
  display: flex;
  align-items: center;
  font-size: 14px;
  position: absolute;
  padding: 7px 15px;
  border-radius: 4px;
  color: #49515c;
  background: #fff;
  border: 1px solid #e1e3e6;
  right: 20px;
  cursor: pointer;
  top: 23px;
}
</style>
